<template>
  <div>
    <van-divider>
      <van-tag plain size="medium" type="primary" @click="showPopup = true">
        添加{{ title }}手法＋
      </van-tag>
    </van-divider>
    <van-row>
      <van-col v-for="(value, field) in inputForm" :key="field" :span="12">
        <van-tag closeable plain size="medium" color="#ffe1e1" text-color="#ad0000" @close="onDelete(field)">
          <span>{{ getTitle(field) }}</span>
          <span>{{ value }}</span>
        </van-tag>
      </van-col>
    </van-row>
    <br/>
    <van-popup v-model="showPopup" position="bottom" :style="{ height: '80%' }">
      <van-nav-bar title="添加手法" left-text="取消" right-text="确认" @click-left="showPopup = false"
                   @click-right="onSubmit"/>
      <p>{{ technoList[fieldForm.index].description }}</p>
      <van-form colon>
        <van-cell-group :border="false">
          <van-field v-model="fieldForm.index" readonly input-align="right" label="手法" placeholder="请选择手法"
                     :rules="[{ required: true }]">
            <template #input>
              <select v-model="fieldForm.index">
                <option v-for="(item, index) in technoList" :key="item.field" :value="index">
                  {{ getTitle(item.field) }}
                </option>
              </select>
            </template>
          </van-field>
          <van-field v-model="fieldForm.value" type="number" input-align="right" label="赋值" :value="fieldForm.action"
                     placeholder="请输入赋值" :rules="[{ required: true }]">
          </van-field>
        </van-cell-group>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import {getOptionsTarget} from '@/utils'

export default {
  props: {
    resultForm: Object,
    technoList: Array,
    title: String,
  },
  model: {
    prop: 'resultForm',
    event: 'change'
  },
  data() {
    return {
      inputForm: {},
      fieldForm: {
        index: 0,
        value: null
      },
      showPopup: false
    }
  },
  watch: {
    resultForm: {
      handler(newValue) {
        this.inputForm = newValue
      },
      immediate: true,
      deep: true
    },
    inputForm: {
      handler(newValue) {
        this.$emit('change', newValue)
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    getOptionsTarget: getOptionsTarget,
    getTitle(field) {
      for (let i = 0; i < this.technoList.length; i++) {
        if (this.technoList[i].field === field) {
          return this.technoList[i].title
        }
      }
    },
    onSubmit() {
      this.$set(this.inputForm, this.technoList[this.fieldForm.index].field, parseInt(this.fieldForm.value))
      this.showPopup = false
    },
    onDelete(field) {
      this.$delete(this.inputForm, field)
    }
  }
}
</script>

<style scoped>
p {
  font-size: 14px;
  text-align: justify-all;
  padding: 0 15px;
  color: #ee0a24;
}

.van-col {
  padding: 5px 10px;
}

.van-tag {
  margin: 3px;
}
</style>
